<template>
  <a-table
    rowKey="id"
    :columns="columns"
    :data-source="dataList"
    :loading="isTableLoading"
    :pagination="false"
    @change="onChange"
    class="ndo-table"
  >
    <template slot="name" slot-scope="text, record">
      <a @click="rowClicked(record)" :class="{ 'row-checked': entityId == record.id }">{{
        text
      }}</a>
    </template>
  </a-table>
</template>

<script>
  import AppCompoentBase from '/@/shared/component-base/app-component-base';

  export default {
    name: 'g-ndo-table',
    mixins: [AppCompoentBase],
    props: {
      handName: {
        type: String,
      },
      dataList: {},
      isTableLoading: {
        type: Boolean,
        default: false,
      },
      id: {},
      pageMode: {
        type: String,
      },
    },
    data() {
      return {
        columns: [
          {
            title: this.l(this.handName),
            dataIndex: 'name',
            sorter: true,
            width: '20%',
            scopedSlots: { customRender: 'name' },
          },
        ],
        entityId: this.id,
      };
    },
    methods: {
      rowClicked(data) {
        this.entityId = data.id;
        const temp = { id: data.id, name: data.name };
        this.$emit('rowClick', temp);
      },

      /** 排序 */
      // sort: { key: string; value: string } 字段名 desc or asc
      gridSort(sort) {
        this.$emit('sort', sort);
      },
      onChange(pagination, filters, sorter) {
        this.gridSort({ key: sorter.field, value: sorter.order });
      },
    },
  };
</script>

<style lang="less" scoped>
  @import './g-ndo-table.less';
</style>
